<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.mui-content {}

			.mui-search .mui-placeholder {
				line-height: 44px;
			}

			.mui-table-view:before {
				height: 0;
			}

			.top {
				padding-top: 60px;
				position: relative;
			}

			.blur {
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
				background: url(images/timg1.jpg) no-repeat;
				background-size: cover;
				-webkit-filter: blur(5px);
				/*模糊*/
			}

			.top .mui-table-view {
				background-color: inherit;
			}

			.top .mui-table-view,
			.top p {
				color: #fff;
			}

			.top .mui-table-view p {
				color: #EFEFF4;
			}

			.wrap {
				overflow: hidden;
			}

			.work {
				line-height: 30px;
				width: 80%;
				float: left;
			}

			.work p {
				font-size: 12px;
				margin-bottom: 0;
			}

			.right_box {
				position: relative;
				width: 20%;
				float: right;
				font-size: 14px;
				text-align: right;
				padding-right: 5px;
				line-height: 30px;
				color: #fff;
			}

			.work .mui-ellipsis i {
				display: inline-block;
				width: 18px;
				height: 18px;
				line-height: 18px;
				text-align: center;
				background-color: red;
				color: #fff;
				margin-right: 5px;
				font-style: normal;
			}

			.work ul li {
				padding-left: 10px!important;
			}

			.mui-bar .mui-search:before {
				margin-top: -22px;
			}

			.mui-bar .mui-input-row .mui-input-clear~.mui-icon-clear,
			.mui-bar .mui-input-row .mui-input-speech~.mui-icon-speech {
				top: 12px;
				right: 0;
			}

			input[type=search] {
				background-color: rgba(255, 255, 255, 1);
			}

			#slider {
				margin-top: 159px;
			}

			.mui-segmented-control.mui-scroll-wrapper .mui-scroll {
				width: inherit;
			}

			.mui-segmented-control.mui-scroll-wrapper .mui-control-item {
				width: 33.3%;
				border-bottom: 2px solid #FFF;
			}

			.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				border-bottom: 2px solid #007aff;
			}

			#slider {
				background: #FFF;
			}

			.mui-segmented-control .mui-control-item {
				line-height: 36px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-transparent">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">
		    	<div class="mui-input-row mui-search">
		    	    <input type="search" class="mui-input-clear" placeholder="搜索店内商品">
		    	</div>
		    </h1>
		</header>
		<div class="mui-content">
			<div class="top">
				<div class="blur"></div>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="images/p1.jpg">
							<div class="mui-media-body">
								幸福
								<p class="mui-ellipsis"><i class="mui-icon mui-icon-mic"></i>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
							</div>
						</a>
					</li>
				</ul>
				<div class="wrap">
					<div class="work">
						<ul style="width: 100%;">
							<li>
								<p class="mui-ellipsis"><i>团</i>能和心爱的人1起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
							</li>
							<li>
								<p class="mui-ellipsis"><i>团</i>能和心爱的人2起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
							</li>
							<li>
								<p class="mui-ellipsis"><i>团</i>能和心爱的人3起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
							</li>
							<li>
								<p class="mui-ellipsis"><i>团</i>能和心爱的人4起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
							</li>
							<li>
								<p class="mui-ellipsis"><i>团</i>能和心爱的人5起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
							</li>
							<li>
								<p class="mui-ellipsis"><i>团</i>能和心爱的人6起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
							</li>
							<li>
								<p class="mui-ellipsis"><i>团</i>-+能和心爱的人7起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
							</li>
						</ul>
					</div>
					<div class="right_box">
						7条提示 &gt;
					</div>
				</div>
			</div>
			<!--内容-->
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1mobile" data-wid="1.html">
							点菜
						</a>
						<a class="mui-control-item" href="#item2mobile" data-wid="2.html">
							评价
						</a>
						<a class="mui-control-item" href="#item3mobile" data-wid="3.html">
							商家
						</a>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/webviewGroup.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery.vticker.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {
			$('.work').vTicker({
				showItems: 1, // 显示多少行
				// isPaused:true // 是否暂停
				pause: 3000, // 滚动间隔，单位为毫秒
			});
		});

		mui.init();

		mui.plusReady(function() {
			var self = plus.webview.currentWebview(); //获取当前窗体对象
			var thisId = self.shopId; //接受上一页面传过来的值；
			console.log('接收到类型ID值:' + thisId)
			var group = new webviewGroup("viewgroup", {
				items: [{
					id: "1.html",
					url: "1.html",
					extras: {
						shopId:thisId
					}
				}, {
					id: "2.html",
					url: "2.html",
					extras: {
						shopId:thisId
					}
				}, {
					id: "3.html",
					url: "3.html",
					extras: {
						shopId:thisId
					}
				}],
				onChange: function(obj) {
					var c = document.querySelector(".mui-control-item.mui-active");
					if(c) {
						c.classList.remove("mui-active");
					}
					document.querySelector(".mui-scroll .mui-control-item:nth-child(" + (parseInt(obj.index) + 1) + ")").classList.add("mui-active");
				}
			});
			mui(".mui-scroll").on("tap", ".mui-control-item", function(e) {
				var wid = this.getAttribute("data-wid");
				group.switchTab(wid);
			});

		});
		mui.back = function() {
			var _self = plus.webview.currentWebview();
			_self.close("auto");
		}
	</script>

</html>